<template>
  <div class="detailTask">
    <header-nav :leftArrow="true" :titelText="'检查任务详情'"></header-nav>
    <div class="detail">
      <van-tabs v-model:active="active">
        <van-tab title="基础信息">
          <div class="infoBox">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>任务信息</div>
              </div>
            </div>
            <div class="info">
              <div class="infoItem">
                <div class="left">任务编号</div>
                <div class="right">
                  {{ detailForm.taskNo }}
                </div>
              </div>
              <div class="infoItem">
                <div class="left">检查类型</div>
                <div class="right">
                  {{ detailForm.checkTypeName }}
                </div>
              </div>
              <div class="infoItem">
                <div class="left">任务状态</div>
                <div class="right">
                  {{
      detailForm.taskStatus == 1
        ? '待检查'
        : detailForm.taskStatus == 2
          ? '检查中'
          : detailForm.taskStatus == 3
            ? '待审批'
            : detailForm.taskStatus == 4
              ? '技术复核'
              : detailForm.taskStatus == 5
                ? '文书制作'
                : detailForm.taskStatus == 6
                  ? '送达回证'
                  : detailForm.taskStatus == 7
                    ? '已结束'
                    : ''
    }}
                </div>
              </div>
              <div class="infoItem" v-if="detailForm.taskStatus > 2">
                <div class="left">检查结果</div>
                <div class="right">
                  {{
      detailForm.checkResult == 1
        ? '合格'
        : detailForm.checkResult == 2
          ? '不合格'
          : ''
    }}
                </div>
              </div>
              <div class="infoItem" v-if="detailForm.taskStatus > 2 && detailForm.checkResult == 2">
                <div class="left">不合格原因</div>
                <div class="right">
                  {{ detailForm.remark }}
                </div>
              </div>
              <div class="infoItem" v-if="detailForm.taskStatus > 2">
                <div class="left">检查时间</div>
                <div class="right">{{ detailForm.endCheckTime }}</div>
              </div>
              <div class="infoItem">
                <div class="left">主办人</div>
                <div class="right">{{ detailForm.checkerName }}</div>
              </div>
              <div class="infoItem">
                <div class="left">协办人</div>
                <div class="right">{{ detailForm.organizerName }}</div>
              </div>
            </div>
          </div>

          <div class="infoBox">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>单位信息</div>
              </div>
            </div>
            <div class="info">
              <div class="infoItem">
                <div class="left">单位（场所）名称</div>
                <div class="right">
                  {{ detailForm.openPlaceInfo?.placeName }}
                </div>
              </div>
              <div class="infoItem">
                <div class="left">单位（场所）地址</div>
                <div class="right">
                  {{
      detailForm.openPlaceInfo?.city +
      detailForm.openPlaceInfo?.county +
      detailForm.openPlaceInfo?.town +
      detailForm.openPlaceInfo?.address
    }}
                </div>
              </div>
              <div class="infoItem">
                <div class="left">场所类型</div>
                <div class="right">
                  {{ detailForm.openPlaceInfo?.locationTypeName }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="检查信息">
          <div class="infoBox">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>建筑物照片</div>
              </div>
            </div>
            <div class="info" v-if="jzwImgs.length > 0">
              <upload-pictrue :fileList="jzwImgs" :imgType="1"></upload-pictrue>
            </div>
          </div>
          <div class="jcText">
            <div class="icon"></div>
            <div class="txt">检查信息</div>
          </div>
          <div class="yinH infoBox">
            <div class="checkItem" v-for="(item, index) in ruleItemRespList" :key="index">
              <div class="checkItem-title" @click="openItem(index)">
                <div class="text">
                  <div class="txt">{{ item.name }}</div>
                </div>
                <img class="img" src="../../assets/images/modelClose.png" alt="" v-if="ruleClose[index]" />
                <img class="img" src="../../assets/images/modelOpen.png" alt="" v-else />
              </div>
              <van-collapse v-model="activeNames" v-if="ruleClose[index] && item.childList != ''">
                <van-collapse-item v-for="(child, i) in item.childList" :key="i" :name="child.id">
                  <template #title>
                    <div class="ruleItemTitle">
                      <img src="../../assets/images/lsIcon.png" alt="" />
                      <div>
                        {{ child.name }}
                      </div>
                    </div>
                  </template>
                  <div class="childList-1">
                    <div class="childList-title">1、重要事项</div>
                    <div class="childList-item" v-for="(detail, j) in child.detailList" :key="j">
                      <van-checkbox v-model="detail.checked" icon-size="24px" disabled>
                        {{ detail.checkItem }}
                      </van-checkbox>
                    </div>
                  </div>
                  <div class="childList-2">
                    <div class="childList-title">2、其他事项</div>
                    <div class="childList-item">
                      {{ child.others }}
                    </div>
                  </div>
                  <div class="childList-2">
                    <div class="childList-title">3、抽查部位</div>
                    <div class="childList-item">
                      {{ child.spot }}
                    </div>
                  </div>
                  <div class="childList-2">
                    <div class="childList-title">4、具体情形</div>
                    <div class="childList-item">
                      {{ child.specific }}
                    </div>
                  </div>
                </van-collapse-item>
              </van-collapse>
              <div v-if="ruleClose[index] && item.childList == ''" style="border-top: 1px solid #f5f5f5">
                <div class="childList-1">
                  <div class="childList-title">1、重要事项</div>
                  <div class="childList-item" v-for="(detail, i) in item.detailList" :key="i">
                    <van-checkbox v-model="detail.checked" disabled>
                      {{ detail.checkItem }}
                    </van-checkbox>
                  </div>
                </div>
              </div>
              <div class="childList-2" v-if="ruleClose[index] && item.childList == ''">
                <div class="childList-title">2、其他事项</div>
                <div class="childList-item">
                  {{ item.others }}
                </div>
              </div>
              <div class="childList-2" v-if="ruleClose[index] && item.childList == ''">
                <div class="childList-title">3、具体情形</div>
                <div class="childList-item">
                  {{ item.specific }}
                </div>
              </div>
              <div class="line4" v-if="index != ruleClose.length - 1"></div>
            </div>
          </div>
          <div class="infoBox">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>签字信息</div>
              </div>
            </div>
            <div class="info">
              <div class="signBox" style="padding-bottom: 16px; border-bottom: 1px solid #f5f5f5">
                <div class="left">主办人签字</div>
                <div class="right" @click="signView(1)" v-if="signArr[0] != ''">
                  查看签名
                </div>
              </div>
              <div class="signBox" style="
                  padding-bottom: 16px;
                  padding-top: 16px;
                  border-bottom: 1px solid #f5f5f5;
                ">
                <div class="left">协办人签字</div>
                <div class="right" @click="signView(2)" v-if="signArr[1] != ''">
                  查看签名
                </div>
              </div>
              <div class="signBox" style="padding-top: 16px">
                <div class="left">企业负责人签字</div>
                <div class="right" @click="signView(3)" v-if="signArr[2] != ''">
                  查看签名
                </div>
              </div>
            </div>
          </div>
          <div class="infoBox" v-if="detailForm.safeOpinionFileUrl != ''">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>相关文书</div>
              </div>
            </div>
            <div class="info">
              <div class="wsBox">
                <div class="ws-left">
                  <img src="../../assets/images/wsYes.png" alt="" />
                  <div>{{ detailForm.checkResult == 1 ? '公众聚集场所投入使用、营业前消防安全检查意见书.doc' : '不同意投入使用、营业决定书.doc' }}</div>
                </div>
                <div class="ws-right" @click="viewFile(detailForm.safeOpinionFileUrl)">
                  查看
                </div>
              </div>
            </div>
          </div>
          <div class="infoBox" v-if="detailForm.delivReceiptFileUrl != ''">
            <div class="title">
              <div class="title-left">
                <div class="titleIcon"></div>
                <div>送达回证</div>
              </div>
            </div>
            <div class="info">
              <div class="wsBox">
                <div class="ws-left">
                  <img src="../../assets/images/wsYes.png" alt="" />
                  <div>送达回证</div>
                </div>
                <div class="ws-right" @click="viewFile(detailForm.delivReceiptFileUrl)">
                  查看
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="审批信息">
          <van-steps direction="vertical" :active="active2" v-if="recordData.length > 0">
            <van-step v-for="(item, index) in recordData" :key="index">
              <div class="setpBox">
                <div class="setpBox-title">
                  <div class="title1">{{ item.flowNodeName }}</div>
                  <div class="tag1" :class="item.nodeStatus == 1
      ? 'orige'
      : item.nodeStatus == 2
        ? 'green'
        : item.nodeStatus == 3
          ? 'red'
          : ''
      ">
                    {{
      item.nodeStatus == 1
        ? '待审批'
        : item.nodeStatus == 2
          ? '已同意'
          : item.nodeStatus == 3
                    ? '不同意'
                    : ''
                    }}
                  </div>
                </div>
                <div class="setpBox-con">
                  <div class="top">
                    <div class="topName">{{ item.approveName }}</div>
                    <div class="topTime">{{ item.approveTime }}</div>
                  </div>
                  <div class="bot">
                    {{ item.approveOpinions }}
                  </div>
                </div>
              </div>
            </van-step>
          </van-steps>
          <div class="empty" v-else>
            <img src="../../assets/images/empty2.png" alt="" />
            <div>暂无审批数据</div>
          </div>
          <div class="margin-bottom-20"></div>
        </van-tab>
      </van-tabs>
      <van-popup v-model:show="signPicker" round position="bottom" closeable>
        <van-image :src="sign" style="width: 100%;height: 500px;" />
      </van-popup>
    </div>
  </div>
</template>

<script setup name="detail">
import { showFailToast } from 'vant'
import { imgUrlToBase64 } from '../../util/util'
const { useTasks, usePublic } = $globalStore
const route = useRoute()
const router = useRouter()
const id = ref(route.query.id)
const detailForm = ref({})

//建筑物照片
const jzwImgs = ref([])

const activeNames = ref(['1'])
const ruleItemRespList = ref([])
const ruleClose = ref([])
//关闭或打开检查项
const openItem = (i) => {
  ruleClose.value[i] = !ruleClose.value[i]
}

const sign = ref('')
const signPicker = ref(false)
const signView = async (val) => {
  if (val == 1 || val == 2) {
    let arr = detailForm.value.checkerSign.split(',')
    let str = ''
    if (val == 1) {
      str = arr[0] ? arr[0] : ''
    } else if (val == 2) {
      str = arr[1] ? arr[1] : ''
    }
    if (str == '') {
      return showFailToast('暂未签名')
    }
    const r = await usePublic.bindFileUrl(str)
    if (r.code == 0) {
      imgUrlToBase64(r.data).then((s) => {
        sign.value = s
        signPicker.value = true
      })
    }
  } else {
    if (detailForm.value.enterpriserSign == '') {
      return showFailToast('暂未签名')
    }
    const r = await usePublic.bindFileUrl(detailForm.value.enterpriserSign)
    if (r.code == 0) {
      imgUrlToBase64(r.data).then((s) => {
        sign.value = s
        signPicker.value = true
      })
    }
  }
}

//文书相关
const wsForm = reactive({
  name: '',
  url: '',
})

//审批记录
const active2 = ref(0)
const recordData = ref([])
const getApproveRecord = async () => {
  const res = await useTasks.approveRecord(id.value)
  if (res.code == 0) {
    recordData.value = res.data
    for (let index = 0; index < res.data.length; index++) {
      const element = res.data[index]
      if (element.nodeStatus == 2) {
        active2.value++
      } else {
        return
      }
    }
  }
}

//查看文件
const viewFile = (url) => {
  router.push({
    name: 'fileDetail',
    query: {
      url: url,
    },
  })
}

const signArr = ref(['', '', ''])

onMounted(async () => {
  if (id.value != '') {
    const res = await useTasks.taskInfo(id.value)
    if (res.code == 0) {
      detailForm.value = res.data
      // if (res.data.taskStatus >= 3) {
      getApproveRecord()
      // }
      jzwImgs.value = []
      if (res.data.placePhotoUrl != '') {
        let arr = res.data.placePhotoUrl.split(',')
        arr.forEach(async (element) => {
          const r = await usePublic.bindFileUrl(element)
          if (r.code == 0) {
            jzwImgs.value.push(r.data)
          }
        })
      }
      ruleItemRespList.value = res.data.ruleItemRespList
      ruleItemRespList.value.forEach((r) => {
        if (r.childList == '') {
          r.detailList.forEach((d) => {
            if (d.ruleId == 0) {
              Reflect.set(d, 'checked', false)
            } else {
              Reflect.set(d, 'checked', true)
            }
          })
          if (r.others == '') {
            r.others = '无'
          }
          if (r.spot == '') {
            r.spot = '无'
          }
          if (r.specific == '') {
            r.specific = '无'
          }
        } else {
          r.childList.forEach((c) => {
            for (let d = 0; d < c.detailList.length; d++) {
              const element = c.detailList[d]
              if (element.ruleId == 0) {
                Reflect.set(element, 'checked', false)
              } else {
                Reflect.set(element, 'checked', true)
              }
            }
            if (c.others == '') {
              c.others = '无'
            }
            if (c.spot == '') {
              c.spot = '无'
            }
            if (c.specific == '') {
              c.specific = '无'
            }
          })
        }
      })
      ruleClose.value = []
      ruleItemRespList.value.forEach((i, j) => {
        if (j == 0) {
          ruleClose.value.push(true)
        } else {
          ruleClose.value.push(false)
        }
      })
      if (res.data.safeOpinionFileUrl != '') {
        const s = await usePublic.bindFileUrl(res.data.safeOpinionFileUrl)
        if (s.code == 0) {
        }
      }
      if (res.data.delivReceiptFileUrl != '') {
        const s = await usePublic.bindFileUrl(res.data.delivReceiptFileUrl)
        if (s.code == 0) {
        }
      }

      if (detailForm.value.checkerSign != '') {
        let arr = detailForm.value.checkerSign.split(',')
        signArr.value[0] = arr[0]
        signArr.value[1] = arr[1]
      }
      if (detailForm.value.enterpriserSign != '') {
        signArr.value[2] = detailForm.value.enterpriserSign
      }
      console.log(detailForm.value)
    }
  }
})
</script>

<style lang="scss" scoped>
.detailTask {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .detail {
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    margin-top: 46px;

    .infoBox {
      background-color: #ffffff;
      margin: 10px 8px;
      border-radius: 8px;

      .title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .title-left {
          display: flex;
          align-items: center;

          .titleIcon {
            width: 4px;
            height: 14px;
            background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
            border-radius: 20px;
            margin-right: 8px;
          }
        }

        .title-right {
          padding: 5px 12px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #1764ce;
          background-color: rgba(23, 100, 206, 0.1);
          border-radius: 4px;
        }
      }

      .info {
        padding: 16px 12px;

        .infoItem {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .left {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #8c8c8c;
            min-width: 120px;
            margin-right: 20px;
          }

          .right {
            width: 1px;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #2b2b2b;
            text-align: right;
            flex: 1;
            word-wrap: break-word;
            /* 设置自动换行 */
          }
        }

        .infoItem:last-child {
          margin-bottom: 0;
        }

        .danger {
          margin-bottom: 12px;
        }

        .danger:last-child {
          margin-bottom: 0;
        }

        .wsBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ws-left {
            max-width: 250px;
            display: flex;
            align-items: center;
            color: #2b2b2b;
            font-size: 15px;
            font-weight: 500;

            >img {
              width: 36px;
              height: 36px;
            }
          }

          .ws-right {
            min-width: 50px;
            color: #1764ce;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }

      .signBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;

        .left {
          color: #4d4d4d;
        }

        .right {
          color: #1764ce;
        }
      }
    }

    .yinH {
      background-color: #ffffff;

      .checkItem {
        .checkItem-title {
          padding: 16px 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .text {
            display: flex;
            align-items: center;

            .icon {
              width: 4px;
              height: 14px;
              border-radius: 20px;
              background: linear-gradient(180deg,
                  rgba(86, 136, 245, 1) 0%,
                  rgba(23, 100, 206, 1) 100%);
              margin-right: 8px;
            }

            .txt {
              height: 24px;
              font-size: 17px;
              font-weight: 500;
              letter-spacing: 0px;
              line-height: 24px;
              color: #2b2b2b;
            }
          }

          .img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    .jcText {
      padding: 0 20px;
      display: flex;
      align-items: center;

      .icon {
        width: 4px;
        height: 14px;
        border-radius: 20px;
        background: linear-gradient(180deg,
            rgba(86, 136, 245, 1) 0%,
            rgba(23, 100, 206, 1) 100%);
        margin-right: 8px;
      }

      .txt {
        height: 24px;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #8c8c8c;
      }
    }
  }
}

.ruleItemTitle {
  display: flex;
  align-items: center;

  img {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }

  div {
    color: #4d4d4d;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24px;
  }
}

.childList-1 {
  padding: 16px 16px 0 16px;

  .childList-title {
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24px;
    color: #666666;
    border-bottom: 1px solid #f5f5f5;
  }

  .childList-item {
    padding: 16px 0;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 400;
    word-wrap: break-word;
    /* 设置自动换行 */
    border-bottom: 1px solid #f5f5f5;
  }

  .childList-item:last-child {
    border-bottom: none;
  }
}

.childList-2 {
  .childList-title {
    padding: 16px 16px 0 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24px;
    color: #666666;
    border-top: 1px solid #f5f5f5;
  }

  .childList-item {
    padding: 16px;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 400;
    word-wrap: break-word;
    /* 设置自动换行 */
  }
}

.checkTask .van-field__control {
  padding: 0 !important;
}

.line4 {
  width: 100%;
  height: 4px;
  background-color: #f7f7f7;
}

.setpBox {
  background-color: #ffffff;
  border-radius: 4px;

  .setpBox-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #f5f5f5;

    .title1 {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: #4d4d4d;
    }

    .tag1 {
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }
  }

  .setpBox-con {
    padding: 16px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .topName {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #2b2b2b;
        max-width: 130px;
      }

      .topTime {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20px;
        color: #8c8c8c;
      }
    }

    .bot {
      width: 100%;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 21px;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
}

.green {
  background-color: rgba(2, 173, 130, 0.1);
  color: #02ad82;
}

.orige {
  background-color: rgba(252, 119, 10, 0.1);
  color: #fc770a;
}

.red {
  background-color: rgba(255, 77, 77, 0.1);
  color: #ff4d4d;
}

.empty {
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);        
  margin-top: 50%;
  text-align: center;

  >img {
    width: 128px;
    height: 96px;
  }

  >div {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
